<template>
  <div>
    <el-dialog :append-to-body="true" style="border-radius:20px" :visible.sync="dialogForm" @close="close" width="360px"
               :close-on-click-modal="false" :close-on-press-escape='false'>
      <!-- <div class="title">
          <p>新增联系人</p>
      </div> -->
      <div slot="title" class="dialog-title">
        <p style="text-align:center;margin:0">{{title}}</p>
      </div>
      <el-form ref="form" :model="form" :rules="rules" labelPosition='left' label-width="100px" size="medium">
        <el-form-item label="姓名：" prop="linker">
          <el-input v-model="form.linker"></el-input>
        </el-form-item>
        <el-form-item label="邮箱：" prop="email">
          <el-input v-model="form.email" :disabled="form.isSend == 1"></el-input>
        </el-form-item>
        <el-form-item label="职位：" class="not_icon_label">
          <el-input v-model="form.postType"></el-input>
        </el-form-item>
        <el-form-item label="电话/传真：" class="not_icon_label">
          <el-input v-model="form.telFax"></el-input>
        </el-form-item>
        <el-form-item label="备注：" class="not_icon_label">
          <el-input v-model="form.remarks"></el-input>
        </el-form-item>
      </el-form>
      <div style="text-align:center">
        <el-button @click="close()" size="small" type="primary" plain>取消</el-button>
        <el-button type="primary" @click="submit('form')" :loading="loading" size="small">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
    export default {
        name: "contact",
        props: ['title', 'data', 'nowkey'],
        data() {
            var checkphone = (rule, value, callback) => {
                const reg = /^[0-9,+ \-,\\(,\\),x,!,#,$,%,^,&,*,|,?,\s]*$/
                if (reg.test(value)) {
                    callback();
                } else {
                    return callback(new Error('电话号码只能包括数字、空格和符号'));
                }
            };
            return {
                dialogForm: false,
                loading: false,
                form: {},
                rules: {
                    linker: [
                        {required: true, message: '请输入姓名', trigger: 'blur'}
                    ],
                    email: [
                        {required: true, message: '请输入客户邮箱', trigger: 'blur'},
                        {type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}
                    ],
                    telFax: [
                        {validator: checkphone, trigger: 'blur'}
                    ]
                },
            }
        },
        methods: {
            close() {
                this.dialogForm = false
                this.form.linker = ''
                this.form.email = ''
                this.form.postType = ''

                this.form.telFax = ''
                this.form.remarks = ''
            },
            submit(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.loading = true
                        this.$emit('update', this.form, this.nowkey)
                    } else {
                        return false;
                    }
                });
            }
        },
        watch: {
            data(value) {
                this.form = JSON.parse(JSON.stringify(value))
            }
        }
    }
</script>
<style lang="scss">
  .not_icon_label {
    label {
      padding-left: 10px;
    }
  }
</style>


<style scoped>
  .title {
    text-align: center;
    /* color:  $default-color; */
    line-height: 35px;
    margin-top: -40px
  }
</style>

